<html>
<head>
    <title>费用分析</title>

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
        }

        .chart-outer{
            margin-top: 20px;
            height: 200px;
            width: 96%;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="page-vue">
    <div class="page-title">对标分析</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree"  :energy="energyType"   v-on:check-node="onTreeCheck"  v-bind:ischeckbox="true" v-bind:checkboxdisb="'upd'" :tabsign="'z'"></dev-tree>
          </el-col>

        <el-col :span="20">
            <div class="page-title" style="top:40px;left: 16.66667%;background: white;">
                <el-form :inline="true" style="margin-top: 10px">

                    <el-switch
                            v-model="value3"
                            @change="radioChange"
                            active-text="按月查"
                            inactive-text="按年查">
                    </el-switch>

                    <el-form-item label="">
                        <el-date-picker  :type="dateMod" v-model="day" :value-format="dateFormat" placeholder="日期" style="width: 150px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" content="请选择左侧的区域" placement="right">
                        <el-button type="primary" @click="search">分析</el-button>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </div>
            <div class="chart-outer" id="ChartDiv1">
            </div>
            <div class="chart-outer" id="ChartDiv2">
            </div>
            <div class="chart-outer" id="ChartDiv3">
            </div>
                <p class="tab-title">统计</p>
            <el-table  style="width: 100%" :data="tabData">
                <el-table-column prop="groupName" label="监控区域" align="center">
                </el-table-column>
                <el-table-column prop="field04" label="总用量" align="center">
                </el-table-column>
                <el-table-column prop="field05" label="总产量" align="center">
                </el-table-column>
                <el-table-column prop="field06" label="单位产值能耗" align="center">
                </el-table-column>
                <el-table-column prop="field07" label="定额" align="center">
                </el-table-column>
                <el-table-column prop="field08" label="定额超限" align="center">
                </el-table-column>
            </el-table>
        </el-col>
        </el-row>
    </div>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-vue',
        data:{
            day:'',
            checkData:[],
            title:[],
            xData:[],
            tabData:[],
            value3:true,
            dateFormat:'yyyy-MM',
            dateMod:'month',
            energyType:'',
        },
        methods:{
            radioChange:function(data){
                if (data){
                    this.dateMod = 'month';
                    this.dateFormat = 'yyyy-MM';
                    this.day= TimeUtil.convertToString(new Date()).substr(0,7)
                }else {
                    this.dateMod = 'year';
                    this.dateFormat = 'yyyy';
                    this.day= TimeUtil.convertToString(new Date()).substr(0,4)
                }
            },
            search:function(){
                     if (this.checkData.length !=0){
                         this.loadParam();
                     }
            },
            onTreeCheck:function(data){
                this.checkData = data;
            },
            loadParam:function(){
                var params=[];
                var dArr = this.day.split('-');
                for (var item of this.checkData){
                     params.push({
                         url:'Analysis/getEnergyUse',
                         type:'get',
                         param:{
                             zoneIds:item.dataId,
                             energyType:'Total2Coal',
                             year:dArr[0]||0,
                             month:dArr[1]||0,
                             day:dArr[2]||0,
                             zoneType:0,
                             sumType:1,
                         },

                     })
                }
                HttpUtil.when(params).success((data)=>{
                    var  ydata1 =[], ydata2=[] ,ydata3 = [],ydata4 = [],ydata5 = [];
                    this.xData = [];
                    this.tabData = [];
                    for(var item of data){
                        this.xData.push(item.data[0].groupName);
                         ydata1.push(item.data[0].field04);  //总用量
                         ydata2.push(item.data[0].field05);  //总产值
                         ydata3.push(item.data[0].field08);  //定额超限率
                         ydata4.push(item.data[0].field06);  //单品用量
                         ydata5.push(item.data[0].field07);  //定额
                         this.tabData.push(item.data[0]);
                    }

                    this.getChart('ChartDiv1',ydata1,this.day+'总用量对标分析');
                    this.getChart('ChartDiv2',ydata2,this.day+'总产值对标分析');
                    this.getChart('ChartDiv3',ydata3,this.day+'定额超限率对标分析');
                })



            },
            onChangePage:function(val){

            },
            getChart:function (id,data,name) {
                let myChart = echarts.init(document.getElementById(id));
                 myChart.clear();
                this.ChartData={
                    color: ['#30BFCD', '#234567','#F98317'],
                    title: {
                        left: 'center',
                        text: name,
                    },
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: this.title,
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                         data:this.xData,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series:[{
                        type: 'line',
                        data: data,
                    }
                    ]
                };

                myChart.setOption(this.ChartData);

            },

        },
        created:function(){
            this.day= TimeUtil.convertToString(new Date()).substr(0,7);
            this.energyType = HttpUtil.getQueryString('energyType');
        },
        mounted:function(){

        }
    });


</script>


</body>

</html>
